<template>
  <t-row :gutter="16" class="row-container">
    <t-col :xs="12" :xl="6">
      <t-card :title="t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
        <template #actions>
          <t-radio-group v-model="sale" variant="default-filled" @change="handleGetSaleRank">
            <t-radio-button :value="1">{{ t('pages.dashboardBase.rankList.week') }}</t-radio-button>
            <t-radio-button :value="2">{{ t('pages.dashboardBase.rankList.month') }}</t-radio-button>
            <t-radio-button :value="3">{{ t('pages.dashboardBase.rankList.year') }}</t-radio-button>
            <t-radio-button :value="4">{{ t('pages.dashboardBase.rankList.all') }}</t-radio-button>
          </t-radio-group>
        </template>
        <t-table :data="saleRankDate" :columns="SALE_COLUMNS" :pagination="pagination" @page-change="onPageChange" row-key="productName" size="small" stripe bordered>
          
          <template #index="{ rowIndex }">
            <span :class="getRankClass(rowIndex+(pagination.current-1)*pagination.pageSize)">
              <img v-if="rowIndex+(pagination.current-1)*pagination.pageSize==0" src="@/assets/rank-1.png" :alt="`${rowIndex + 1} rank`" style="width: 18px; height: 20px">
              <img v-else-if="rowIndex+(pagination.current-1)*pagination.pageSize==1" src="@/assets/rank-2.png" :alt="`${rowIndex + 1} rank`" style="width: 18px; height: 20px">
              <img v-else-if="rowIndex+(pagination.current-1)*pagination.pageSize==2" src="@/assets/rank-3.png" :alt="`${rowIndex + 1} rank`" style="width: 18px; height: 20px">
              <template v-else>{{ rowIndex+(pagination.current-1)*pagination.pageSize+1 }}</template>
            </span>
          </template>

          <template #saleId="{ row }">
            {{ userStore.getUserNameById(row.saleId) }}
          </template>
          <template #moeny="{ row }">
            {{ row.moeny }} 元
          </template>
          <template #operation="slotProps">
            <t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
              t('pages.dashboardBase.rankList.info')
            }}</t-link>
          </template>
        </t-table>
      </t-card>
    </t-col>
    <t-col :xs="12" :xl="6">
      <t-card :title="t('pages.dashboardBase.rankList.title1')" class="dashboard-rank-card" :bordered="false">
        <template #actions>
          <t-radio-group v-model="desiger"  variant="default-filled" @change="handleGetDesigerRank">
            <t-radio-button :value="1">{{ t('pages.dashboardBase.rankList.week') }}</t-radio-button>
            <t-radio-button :value="2">{{ t('pages.dashboardBase.rankList.month') }}</t-radio-button>
            <t-radio-button :value="3">{{ t('pages.dashboardBase.rankList.year') }}</t-radio-button>
            <t-radio-button :value="4">{{ t('pages.dashboardBase.rankList.all') }}</t-radio-button>
          </t-radio-group>
        </template>
        <t-table :data="desigerRankDate" :columns="BUY_COLUMNS" :pagination="pagination1" @page-change="onPageChange1" row-key="productName" size="small" stripe bordered>
          <template #index="{ rowIndex }">
            <span :class="getRankClass(rowIndex+(pagination1.current-1)*pagination1.pageSize)">
              <img v-if="rowIndex+(pagination1.current-1)*pagination1.pageSize==0" src="@/assets/rank-1.png" :alt="`${rowIndex + 1} rank`" style="width: 18px; height: 20px">
              <img v-else-if="rowIndex+(pagination1.current-1)*pagination1.pageSize==1" src="@/assets/rank-2.png" :alt="`${rowIndex + 1} rank`" style="width: 18px; height: 20px">
              <img v-else-if="rowIndex+(pagination1.current-1)*pagination1.pageSize==2" src="@/assets/rank-3.png" :alt="`${rowIndex + 1} rank`" style="width: 18px; height: 20px">
              <template v-else>{{ rowIndex+(pagination1.current-1)*pagination1.pageSize + 1 }}</template>
            </span>
          </template>
          <template #designerId="{ row }">
            {{ userStore.getUserNameById(row.designerId) }}
          </template>
          <template #moeny="{ row }">
            {{ row.moeny }} 元
          </template>
          <template #operation="slotProps">
            <t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
              t('pages.dashboardBase.rankList.info')
            }}</t-link>
          </template>
        </t-table>
      </t-card>
    </t-col>
  </t-row>
</template>

<script setup lang="ts">
import { MessagePlugin, type TdBaseTableProps } from 'tdesign-vue-next';

import Trend from '@/components/trend/index.vue';
import { t } from '@/locales';

import { BUY_TEND_LIST, SALE_TEND_LIST } from '../constants';
import dayjs from 'dayjs';
import { onMounted, reactive, ref } from 'vue';
import { homeDesignerRanking, homeSaleRanking } from '@/api/dashboard/base';
import { useUserStore } from '@/store';
// 用户仓库
const userStore = useUserStore();
const SALE_COLUMNS: TdBaseTableProps['columns'] = [
// { align: 'center',colKey: 'serial-number', width: 70, title: '排名' },
  {
    align: 'center',
    colKey: 'index',
    title: t('pages.dashboardBase.saleColumns.index'),
    width: 70,
    fixed: 'left',
  },
  
  {
    align: 'center',
    colKey: 'saleId',
    title: t('pages.dashboardBase.saleColumns.saleId'),
    fixed: 'left',
  },
  {
    align: 'center',
    ellipsis: true,
    colKey: 'moeny',
    title: t('pages.dashboardBase.saleColumns.money'),
  },
 
  {
    align: 'center',
    colKey: 'operation',
    title: t('pages.dashboardBase.saleColumns.operation'),
    width: 70,
    fixed: 'right',
  },
];

const BUY_COLUMNS: TdBaseTableProps['columns'] = [
  {   
    align: 'center',
    colKey: 'index',
    title: t('pages.dashboardBase.buyColumns.index'),
    width: 70,
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'designerId',
    title: t('pages.dashboardBase.buyColumns.designerId'),
    fixed: 'left',
  },
  {
    align: 'center',
    ellipsis: true,
    colKey: 'moeny',

    title: t('pages.dashboardBase.buyColumns.money'),
  },
  {
    align: 'center',
    colKey: 'operation',
    title: t('pages.dashboardBase.buyColumns.operation'),
    width: 70,
    fixed: 'right',
  },
];
const pagination = reactive({
  current: 1,
  pageSize: 5,
  total: 0,
});
const pagination1 = reactive({
  current: 1,
  pageSize: 5,
  total: 0,
});
const onPageChange = (pageInfo, context) => {
  console.log('page-change', pageInfo, context);
  // 受控用法需要下面两行代码
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
};
const onPageChange1 = (pageInfo, context) => {
  console.log('page-change', pageInfo, context);
  // 受控用法需要下面两行代码
  pagination1.current = pageInfo.current;
  pagination1.pageSize = pageInfo.pageSize;
};
const rehandleClickOp = (val: MouseEvent) => {
  console.log(val);
};
const getRankClass = (index: number) => {
  return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
};
const sale = ref(2)
const saleRankDate = ref()
const handleGetSaleRank = () => {
  const params = {
    beginTime:'',
    endTime:'',
  }
  const now = new Date();
  
  switch(sale.value) {
    case 1: // 本周
      const firstDayOfWeek = new Date(now.setDate(now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)));
      const lastDayOfWeek = new Date(firstDayOfWeek);
      lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
      
      params.beginTime = dayjs(firstDayOfWeek).format('YYYY-MM-DD 00:00:00');
      params.endTime = dayjs(lastDayOfWeek).format('YYYY-MM-DD 23:59:59');
      break;
      
    case 2: // 本月
      const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
      const lastDayOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
      
      params.beginTime = dayjs(firstDayOfMonth).format('YYYY-MM-DD 00:00:00');
      params.endTime = dayjs(lastDayOfMonth).format('YYYY-MM-DD 23:59:59');
      break;
      
    case 3: // 本年
      const firstDayOfYear = new Date(now.getFullYear(), 0, 1);
      const lastDayOfYear = new Date(now.getFullYear(), 11, 31);
      
      params.beginTime = dayjs(firstDayOfYear).format('YYYY-MM-DD 00:00:00');
      params.endTime = dayjs(lastDayOfYear).format('YYYY-MM-DD 23:59:59');
      break;
      
    case 4: // 全部
      // 不传日期参数
      params.beginTime='';
      params.endTime='';
      break;
  }
    homeSaleRanking(params).then((data) => {
      saleRankDate.value = data
      pagination.total = data.length
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
}
const desiger = ref(2)
const desigerRankDate = ref()
const handleGetDesigerRank = () => {
  const params = {
    beginTime:'',
    endTime:'',
  }
  const now = new Date();
  
  switch(desiger.value) {
    case 1: // 本周
      const firstDayOfWeek = new Date(now.setDate(now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)));
      const lastDayOfWeek = new Date(firstDayOfWeek);
      lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
      
      params.beginTime = dayjs(firstDayOfWeek).format('YYYY-MM-DD 00:00:00');
      params.endTime = dayjs(lastDayOfWeek).format('YYYY-MM-DD 23:59:59');
      break;
      
    case 2: // 本月
      const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
      const lastDayOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
      
      params.beginTime = dayjs(firstDayOfMonth).format('YYYY-MM-DD 00:00:00');
      params.endTime = dayjs(lastDayOfMonth).format('YYYY-MM-DD 23:59:59');
      break;
      
    case 3: // 本年
      const firstDayOfYear = new Date(now.getFullYear(), 0, 1);
      const lastDayOfYear = new Date(now.getFullYear(), 11, 31);
      
      params.beginTime = dayjs(firstDayOfYear).format('YYYY-MM-DD 00:00:00');
      params.endTime = dayjs(lastDayOfYear).format('YYYY-MM-DD 23:59:59');
      break;
      
    case 4: // 全部
      // 不传日期参数
      params.beginTime='';
      params.endTime='';
      break;
  }
    homeDesignerRanking(params).then((data) => {
      desigerRankDate.value = data
      pagination1.total = data.length
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
}

onMounted(() => {
  handleGetSaleRank()
  handleGetDesigerRank()
});
</script>

<style lang="less" scoped>
.dashboard-rank-card {
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);

  :deep(.t-card__header) {
    padding: 0;
  }

  :deep(.t-card__title) {
    font: var(--td-font-title-large);
    font-weight: 400;
  }

  :deep(.t-card__body) {
    padding: 0;
    margin-top: var(--td-comp-margin-xxl);
  }
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: var(--td-gray-color-5);
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: var(--td-brand-color);
  }
}
</style>
